<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .focus {
            position: relative;
            width: 721px;
            height: 455px;
            margin: 50px 200px;
            /* overflow: hidden; */
        }
        
        .lis {
            float: left;
        }
        
        .uls {
            width: 500%;
        }
        
        .btnl,
        .btnr {
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            display: none;
        }
        
        .btnr {
            right: 0;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            var btnl = document.querySelector('.btnl');
            var btnr = document.querySelector('.btnr');
            var focus = document.querySelector('.focus');
            var uls = document.querySelector('.uls')
                //盒子宽度获取
            var focusWidth = focus.offsetWidth
                //鼠标经过显示箭头,鼠标离开箭头消失
            focus.addEventListener('mouseenter', function() {
                btnl.style.display = 'block'
                btnr.style.display = 'block'
            })
            focus.addEventListener('mouseleave', function() {
                btnl.style.display = 'none'
                btnr.style.display = 'none'
            })

            //点击右侧按钮图片滚动
            // 外部声明变量num,点击一次自增1,让变量乘以图片宽度,就是ul滚动的额距离
            var num = 0;
            btnr.addEventListener('click', function() {
                num++;
                //点击一次,图片往右面走变量乘以宽度
                animate(ul, -num * focusWidth)
            })




            function animate(obj, target, callback) {
                // console.log(callback);  callback = function() {}  调用的时候 callback()

                // 先清除以前的定时器，只保留当前的一个定时器执行
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    // 步长值写到定时器的里面
                    // 把我们步长值改为整数 不要出现小数的问题
                    // var step = Math.ceil((target - obj.offsetLeft) / 10);
                    var step = (target - obj.offsetLeft) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    if (obj.offsetLeft == target) {
                        // 停止动画 本质是停止定时器
                        clearInterval(obj.timer);
                        // 回调函数写到定时器结束里面
                        // if (callback) {
                        //     // 调用函数
                        //     callback();
                        // }
                        callback && callback();
                    }
                    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                    obj.style.left = obj.offsetLeft + step + 'px';

                }, 15);
            }
        })
    </script>
</head>

<body>


    <div class="focus">
        <a href="javascript:;" class="btnl">&gt;</a>
        <a href="javascript:;" class="btnr">&lt;</a>
        <ul class="uls">
            <li class="lis">
                <a href=""><img src="images/focus.jpg" alt=""></a>
            </li>
            <li class="lis">
                <a href=""><img src="images/focus1.jpg" alt=""></a>
            </li>
        </ul>
    </div>
</body>

</html>